import 'package:ati_package/core/utils/ati_assets.dart';
import 'package:ati_package/core/utils/ati_font.dart';
import 'package:ati_package/pages/common/ati_scaffold.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../../core/utils/ati_color.dart';

class PointsDetView extends StatefulWidget {
  const PointsDetView({super.key});

  @override
  State<PointsDetView> createState() => _PointsDetViewState();
}

class _PointsDetViewState extends State<PointsDetView> {
  @override
  Widget build(BuildContext context) {
    return AtiScaffold(
      extendBodyBehindAppBar: true,
      barBgColor: Colors.transparent,
      title: '积分明细',
      body: Stack(children: [buildBgImage(), buildContent()]),
    );
  }

  buildBgImage() {
    return Container(
      height: 250.r,
      width: Get.width,
      decoration: BoxDecoration(
        // gradient: LinearGradient(
        //   colors: [Color(0xFFB3E5FC), Color(0xFFC8E6C9)],
        //   begin: Alignment.topCenter,
        //   end: Alignment.bottomCenter,
        // ),
        image: DecorationImage(
          image: AssetImage(AtiAssets.pointsDetBg, package: 'ati_package'),
          fit: BoxFit.fitWidth,
        ),
      ),
    );
  }

  buildContent() {
    return SafeArea(
      bottom: false,
      child: SingleChildScrollView(
        child: Column(children: [buildMypoints(), buildNewsWidget()]),
      ),
    );
  }

  //我的积分
  buildMypoints() {
    return Container(
      padding: EdgeInsets.only(top: 12.5.w, left: 16.r, bottom: 20.r),
      decoration: BoxDecoration(
        color: Color.fromRGBO(255, 255, 255, 0.2),
        borderRadius: BorderRadius.circular(0.r),
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                '我的积分',
                style: TextStyle(
                  fontSize: 12.sp,
                  color: AtiColor.textColor1,
                  fontWeight: FontWeight.w500,
                ),
              ),
              SizedBox(height: 5.h),
              Text(
                '29166',
                style: TextStyle(
                  fontSize: 25.sp,
                  color: AtiColor.successColor,
                  fontWeight: FontWeight.w600,
                ),
              ),
              Text(
                '50积分 = 1USDT',
                style: TextStyle(
                  fontSize: 10.sp,
                  color: Color(0xFF666666),
                  fontWeight: FontWeight.w500,
                ),
              ),
              SizedBox(height: 12.r),
              IncomeExpenseTab(),
            ],
          ),
        ],
      ),
    );
  }

  buildNewsWidget() {
    return Container(
      padding: EdgeInsets.only(top: 5.r, left: 16.r, right: 16.r),
      decoration: BoxDecoration(color: AtiColor.pageColor),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '2024-01',
            style: TextStyle(
              color: AtiColor.textColor1,
              fontSize: AtiFont.font14,
              fontWeight: FontWeight.w600,
            ),
          ),
          buildsss(),
        ],
      ),
    );
  }

  buildsss() {
    return ListView.separated(
      itemCount: 50,
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
      itemBuilder: (context, index) => _buildItem(),
      separatorBuilder: (context, index) {
        if (index == 5) {
          return Text(
            '2024-01',
            style: TextStyle(
              color: AtiColor.textColor1,
              fontSize: AtiFont.font14,
              fontWeight: FontWeight.w600,
            ),
          );
        }
        return const SizedBox.shrink();
      },
    );
  }

  _buildItem() {
    return Container(
      // margin: EdgeInsets.symmetric(vertical: 6.h),
      margin: EdgeInsets.symmetric(vertical: 6.r),
      padding: EdgeInsets.symmetric(vertical: 10.r, horizontal: 15.r),

      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12.r),
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 左边文字
          Container(
            padding: EdgeInsetsGeometry.symmetric(vertical: 3.r),
            height: 56.r,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  '转盘抽奖',
                  style: TextStyle(
                    fontSize: 14.sp,
                    fontWeight: FontWeight.w600,
                  ),
                  overflow: TextOverflow.ellipsis,
                ),
                // Spacer(),
                // SizedBox(height: 16.h),
                Text(
                  '2025-09-25 00:00:00',
                  style: TextStyle(fontSize: 11.sp, color: Color(0xFF666666)),
                ),
              ],
            ),
          ),
          Spacer(),
          // 左边文字
          Container(
            padding: EdgeInsetsGeometry.symmetric(vertical: 3.r),
            height: 64.r,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  '+200',
                  style: TextStyle(
                    fontSize: 14.sp,
                    color: Color(0xFF13BF78),
                    fontWeight: FontWeight.w600,
                  ),
                  overflow: TextOverflow.ellipsis,
                ),

                Text(
                  '剩余积分：34433.00',
                  style: TextStyle(fontSize: 11.sp, color: Color(0xFF666666)),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  buildPointsListWidget() {
    return ListView.builder(
      itemCount: 15,
      shrinkWrap: true, // 关键：嵌套 ListView 时要设置
      physics: const NeverScrollableScrollPhysics(),
      itemBuilder: (context, index) {
        return Container(
          // margin: EdgeInsets.symmetric(vertical: 6.h),
          margin: EdgeInsets.symmetric(vertical: 6.r),
          padding: EdgeInsets.symmetric(vertical: 10.r, horizontal: 15.r),

          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(12.r),
          ),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 左边文字
              Container(
                padding: EdgeInsetsGeometry.symmetric(vertical: 3.r),
                height: 56.r,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      '转盘抽奖',
                      style: TextStyle(
                        fontSize: 14.sp,
                        fontWeight: FontWeight.w600,
                      ),
                      overflow: TextOverflow.ellipsis,
                    ),
                    // Spacer(),
                    // SizedBox(height: 16.h),
                    Text(
                      '2025-09-25 00:00:00',
                      style: TextStyle(
                        fontSize: 11.sp,
                        color: Color(0xFF666666),
                      ),
                    ),
                  ],
                ),
              ),
              Spacer(),
              // 左边文字
              Container(
                padding: EdgeInsetsGeometry.symmetric(vertical: 3.r),
                height: 64.r,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      '+200',
                      style: TextStyle(
                        fontSize: 14.sp,
                        color: Color(0xFF13BF78),
                        fontWeight: FontWeight.w600,
                      ),
                      overflow: TextOverflow.ellipsis,
                    ),

                    Text(
                      '剩余积分：34433.00',
                      style: TextStyle(
                        fontSize: 11.sp,
                        color: Color(0xFF666666),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}

//按键条
class IncomeExpenseTab extends StatefulWidget {
  const IncomeExpenseTab({super.key});

  @override
  State<IncomeExpenseTab> createState() => _IncomeExpenseTabState();
}

class _IncomeExpenseTabState extends State<IncomeExpenseTab> {
  int _selectedIndex = 0; // 0 收入，1 支出
  final List<String> _tabs = ['收入明细', '支出明细'];

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: List.generate(_tabs.length, (index) {
        final bool isSelected = _selectedIndex == index;
        return GestureDetector(
          onTap: () {
            setState(() {
              _selectedIndex = index;
            });
          },
          child: AnimatedContainer(
            duration: const Duration(milliseconds: 200),
            margin: EdgeInsets.only(right: 10.r),
            padding: EdgeInsets.symmetric(horizontal: 20.w, vertical: 5.h),
            decoration: BoxDecoration(
              color: isSelected ? Color(0xFF059B4F) : Colors.white,
              borderRadius: BorderRadius.circular(24.r),
              border: Border.all(
                color: isSelected ? Color(0xFF059B4F) : Colors.grey.shade300,
                width: 1,
              ),
            ),
            child: Text(
              _tabs[index],
              style: TextStyle(
                color: isSelected ? Colors.white : Colors.black,
                fontWeight: FontWeight.w500,
                fontSize: 15.sp,
              ),
            ),
          ),
        );
      }),
    );
  }
}
